<template>
  <div v-loading="loading" element-loading-text="加载中..." class="into_storage_detail">
    <div class="main">
      <header class="header">
        <div class="title">
          <div class="text">
            <i class="iconfont icon-detail"></i>
            <span>入库详情</span>
          </div>
          <HStatus v-if="DetailStore?.orderState === 0" type="warning">待退回</HStatus>
          <HStatus v-if="DetailStore?.orderState === 1" type="warning">在途中</HStatus>
          <HStatus v-if="DetailStore?.orderState === 2" type="success">已退回总部</HStatus>
        </div>
        <div class="btn_group">
          <HPlainButton v-permission="'inbound_audit'" v-loading="getListLoading" @click="onAudit">审核</HPlainButton>
          <!-- <template v-if="DetailStore?.status === 1">
          <HPlainButton @click="printBtn">打印</HPlainButton>
          <template v-if="DetailStore?.status === 2">
            <HPlainButton @click="outboundBtn">入库</HPlainButton>
            <HPlainButton type="error" @click="cancellationBtn">作废</HPlainButton>
          </template> -->
        </div>
      </header>

      <div class="divider_line"></div>

      <div class="body">
        <!-- 入库信息 -->
        <div ref="intoStorageInfoRef" class="into_storage_info">
          <div class="title">入库信息</div>
          <div class="info_list">
            <div class="info_item_container">
              <div class="info_item">
                <div class="label">入库单号:</div>
                <div class="value">{{ DetailStore?.code }}</div>
              </div>
              <div class="info_item">
                <div class="label">制单日期:</div>
                <div class="value">{{ DetailStore?.gmtCreate }}</div>
              </div>
            </div>
            <div class="info_item_container">
              <div class="info_item">
                <div class="label">单据类型:</div>
                <div class="value">工单旧件退回</div>
              </div>
              <div class="info_item">
                <div class="label">单据来源:</div>
                <div class="value">{{
                  sourceList.find((item) => item.value == DetailStore?.source)?.title
                }}</div>
              </div>
            </div>
            <div class="info_item_container alignment">
              <div class="info_item">
                <div class="label">工单号:</div>
                <div class="value">{{ DetailStore?.workNo }}</div>
              </div>
              <div class="info_item">
                <div class="label">客户信息:</div>
                <div class="value">{{ DetailStore?.name }} &nbsp; {{ DetailStore?.phone }}</div>
              </div>
            </div>
            <div class="info_item">
              <div class="label">单据备注:</div>
              <div class="value">{{ DetailStore?.remark }}</div>
            </div>
          </div>
        </div>

        <!-- 物流信息 -->
        <div ref="logisticsInfoRef" class="logistics_info">
          <div class="title">物流信息</div>
          <div class="info_list">
            <div class="info_item">
              <div class="label">物流名称:</div>
              <div class="value">{{ DetailStore?.logisticsCorpName }}</div>
            </div>
            <div class="info_item">
              <div class="label">单号:</div>
              <div class="value">{{ DetailStore?.logisticsCode }}</div>
            </div>
            <!-- <div class="info_item">
              <div class="label">物流备注:</div>
              <div class="value">{{ DetailStore?.logisticsRemark }}</div>
            </div> -->
          </div>
        </div>

        <!-- 操作日志 -->
        <div ref="operateInfoRef" class="operate_info">
          <div class="title">操作日志</div>
          <div class="info_list">
            <div class="info_item">
              <div class="label">制单人:</div>
              <div class="value">{{ DetailStore?.createEmp }}</div>
            </div>
            <div class="info_item">
              <div class="label">审核人:</div>
              <div class="value">{{ DetailStore?.applyName }}</div>
            </div>
            <div class="info_item">
              <div class="label">审核时间:</div>
              <div class="value">{{ DetailStore?.applyTime }}</div>
            </div>
            <!-- <div class="info_item">
              <div class="label">审核备注:</div>
              <div class="value">{{ DetailStore?.reviewRemark }}</div>
            </div> -->
            <!-- <template v-if="DetailStore?.inboundTime">
              <div class="info_item">
                <div class="label">入库人:</div>
                <div class="value">{{ DetailStore?.inboundEmp }}</div>
              </div>
              <div class="info_item">
                <div class="label">入库时间:</div>
                <div class="value">{{ DetailStore?.inboundTime }}</div>
              </div>
              <div class="info_item">
                <div class="label">入库备注:</div>
                <div class="value">{{ DetailStore?.inboundRemark }}</div>
              </div>
            </template>
            <template v-if="DetailStore?.cancelTime">
              <div class="info_item">
                <div class="label">作废单操作人:</div>
                <div class="value">{{ DetailStore?.cancelEmp }}</div>
              </div>
              <div class="info_item">
                <div class="label">作废时间:</div>
                <div class="value">{{ DetailStore?.cancelTime }}</div>
              </div>
              <div class="info_item">
                <div class="label">作废备注:</div>
                <div class="value">{{ DetailStore?.cancelRemark }}</div>
              </div>
            </template> -->
          </div>
        </div>

        <!-- 设备列表 -->
        <div class="product_info">
          <div class="title">
            <div class="line"></div>
            <h4 class="text">设备列表</h4>
          </div>
          <div class="table">
            <el-table
              :border="true"
              :data="DetailStore?.materialList ?? []"
              height="100%"
              resizable
              stripe
            >
              <template #empty>
                <el-empty description="暂无数据" />
              </template>
              <!-- 序号 -->
              <el-table-column
                fixed="left"
                label="序号"
                type="index"
                width="60"
                :align="'center'"
              />

              <!-- 编号 -->
              <el-table-column label="编号" min-width="100" prop="code" show-overflow-tooltip />

              <!-- 类型 -->
              <el-table-column label="类型" show-overflow-tooltip width="100">
                <template #default="i">
                  {{ i.row.type == 1 ? '成品' : '物料' }}
                </template>
              </el-table-column>

              <!-- 设备名称 -->
              <el-table-column label="设备名称" min-width="100" prop="name" show-overflow-tooltip />

              <!-- 型号 -->
              <!-- <el-table-column label="型号" min-width="100" prop="model" show-overflow-tooltip /> -->

              <!-- 规格 -->
              <el-table-column label="规格" min-width="100" prop="specName" show-overflow-tooltip />

              <!-- 品牌 -->
              <!-- <el-table-column label="品牌" min-width="100" prop="brand" show-overflow-tooltip /> -->

              <!-- 分类 -->
              <el-table-column
                label="分类"
                min-width="120"
                prop="goodsType"
                show-overflow-tooltip
              />

              <!-- 单位 -->
              <el-table-column label="单位" prop="unit" show-overflow-tooltip width="100" />

              <!-- 仓库 -->
              <el-table-column
                label="仓库"
                min-width="150"
                prop="storeName"
                show-overflow-tooltip
              />

              <!-- 仓位 -->
              <el-table-column
                label="仓位"
                min-width="150"
                prop="storePositionName"
                show-overflow-tooltip
              />

              <!-- 可用库存 -->
              <!-- <el-table-column prop="systemStock" show-overflow-tooltip label="可用库存" width="90">
                <template #header>
                  <span>可用库存</span>
                  <el-tooltip content="可用库存 = 即时库存 - 占用库存" placement="top">
                    <el-icon>
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </template>
              </el-table-column> -->

              <!-- 入库数量 -->
              <el-table-column label="入库数量" prop="qty" show-overflow-tooltip width="90" />

              <!-- 备注 -->
              <el-table-column label="备注" prop="remark" show-overflow-tooltip width="100" />

              <!-- 操作 -->
              <!-- <el-table-column
                :label="[3, 4, 5].includes(DetailStore?.status) ? '序列号' : '选择序列号'"
                width="160"
                prop="stockCodeVos"
                fixed="right"
              >
                <template #default="scope">
                  <template v-if="[3, 4, 5].includes(DetailStore?.status)">
                    {{ scope.row.stockCodeVos[0].code }}
                  </template>
                  <template>
                    <HLink
                      v-if="scope.row.stockCodeVos?.length > 0"
                      @click="handleShowSelectSnCode(scope.row, scope.$index)"
                      >{{ scope.row.stockCodeVos[0].code }}</HLink
                    >
                    <HLink v-else @click="handleShowSelectSnCode(scope.row, scope.$index)"
                      >选择序列号</HLink
                    >
                  </template>
                </template>
              </el-table-column> -->
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import * as _ from 'lodash'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { inboundOldDetail } from '../../../api/store'
  // import userInbound from './userInbound'
  import routeComponentName from '@/config/route-component-name'

  import { useGetWarehouseInList } from '@/services/pages/storage/useWarehouseInbound'

  const { getListLoading, audit } = useGetWarehouseInList()

  defineOptions({
    name: routeComponentName.storage.inStorageDetail,
  })

  // const { storeType, source } = userInbound()

  // 单据来源
  const sourceList = ref([
    { title: '系统单', value: 1 },
    { title: '工单', value: 2 },
    { title: 'ERP单据', value: 3 },
    { title: '仓库移动端单据', value: 4 },
    { title: '第三方系统单据', value: 5 },
  ])

  /**
   * 全局路由对象
   */
  const router = useRouter()
  const route = useRoute()
  const loading = ref(false)
  const DetailStore = ref(null)

  //设备信息
  const getoutStoreList = async () => {
    loading.value = true
    if (route.params.id) {
      const res = await getInboundDetailMaterial(route.params.id)
      if (res) {
        if (res.data.code == 20000) {
          commoditys.value = res.data.data.row.map((o, index) => {
            snCodeAfterSave.value[index] = _.cloneDeep(o.stockCodeVos)
            return { ...o, stockCodeVosTemp: o.stockCodeVos }
          })
        } else {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 5000,
            plain: true,
          })
        }
      }
    }
    loading.value = false
  }
  const modules = ref(null)
  const loadingEmp = ref(false)
  const logisticsName = ref('')
  const inputValueSch = (val) => {
    logisticsName.value = val
  }
  watch(logisticsName, (n) => {
    getLogisticsSelectListArr(n)
  })

  // 获取物流列表
  async function getLogisticsSelectListArr(val) {
    loadingEmp.value = true
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    await getLogisticsSelectList(data).then((res) => {
      if (res.data.success) {
        modules.value = res.data.data.rows
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 5000,
          type: 'error',
          plain: true,
        })
      }
      loadingEmp.value = false
    })
  }

  // 根据仓库ID获取仓库详情
  const getDetailStoreItem = async () => {
    if (!route.params.id) return
    loading.value = true
    await inboundOldDetail(route.params.id).then((res) => {
      if (res) {
        if (res.data.code == 20000) {
          DetailStore.value = res.data.data
        } else {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 5000,
            plain: true,
          })
        }
      }
    })
    loading.value = false
  }

  // 审核
  const onAudit = () => {
    ElMessageBox({
      title: '提示',
      message: '确认审核？',
      type: 'warning',
      showCancelButton: true,
      cancelButtonText: '取消',
      async beforeClose(action, instance, done) {
        if (['close', 'cancel'].includes(action)) {
          done()
        }

        if (action === 'confirm') {
          done()
          audit([DetailStore.value.id]).then((res) => {
            if (res.code == 20000) {
              ElMessage({
                type: 'success',
                message: '审核成功',
                duration: 5000,
              })
            }
          })
        }
      },
    })
  }

  onMounted(async () => {
    await getDetailStoreItem()
    // await getoutStoreList()
    // setProductInfoStyle()
  })
</script>

<style lang="scss" scoped>
  @import './detail';
</style>
